import React from 'react';
import BraftEditor from 'braft-editor';
import { uploadFile } from '@/utils/fileUpload';
import { message } from 'antd';

const ContentEditor = React.forwardRef((props, ref) => {
    const { onChange, value } = props;
    // const editorValue = BraftEditor.createEditorState(value);
    //
    // console.log('================>BraftEditor.createEditorState(value)', BraftEditor.createEditorState('123'));

    // 编辑器上传图片的操作
    const myUploadFn = param => {
        const params = {
            fileInfo: param
        };
        return uploadFile(params);
    };
    // 不允许添加尺寸大于100M的文件
    const myValidateFn = file => {
        if (file.size > 1024 * 1024 * 100) {
            message.error('Size is greater than 1M!');
            return false;
        }
        return true;
    };

    const handleChange = editorState => {
        onChange(editorState.toHTML());
    };

    return (
        <BraftEditor
            ref={ref}
            defaultValue={BraftEditor.createEditorState(value)}
            media={{
                uploadFn: myUploadFn,
                validateFn: myValidateFn,
                accepts: {
                    image: 'image/png,image/jpeg,image/gif'
                }
            }}
            imageControls={['size', 'remove']}
            excludeControls={['fullscreen']}
            style={{
                border: '1px solid #d9d9d9',
                borderTopWidth: '1.02px',
                borderRadius: '4px',
                marginTop: '4px'
            }}
            {...props}
            onChange={handleChange}
        />
    );
});

export default ContentEditor;
